<template>
  <div class="review-manager">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h2>评价管理</h2>
      <el-tag type="info">共 {{ total }} 条评价</el-tag>
    </div>

    <!-- 搜索和操作区域 -->
    <el-card class="operation-area" shadow="hover">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="商品名称">
          <el-input v-model="searchForm.productName" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <el-form-item label="评价状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="不通过" :value="0"></el-option>
            <el-option label="已通过" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="default" plain type="primary" @click="handleSearch">查询</el-button>
          <el-button size="default" plain @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 评价列表 -->
    <el-card class="table-card" shadow="hover">
      <el-table :data="reviews" border style="width: 100%">
        <el-table-column label="用户信息" width="180">
          <template #default="scope">
            <div class="user-info">
              <div>用户名：{{ scope.row.user.username }}</div>
              <div>姓名：{{ scope.row.user.name }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" min-width="300">
          <template #default="scope">
            <div class="product-info">
              <el-image
                  :src="'api' + scope.row.product.imageUrl"
                  :preview-src-list="['api' + scope.row.product.imageUrl]"
                  fit="cover"
                  style="width: 50px; height: 50px">
              </el-image>
              <div class="product-detail">
                <div class="product-name">{{ scope.row.product.name }}</div>
                <div class="product-price">
                  ¥{{ scope.row.product.price.toFixed(2) }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="评分" width="150">
          <template #default="scope">
            <el-rate
                v-model="scope.row.rating"
                disabled
                show-score
                text-color="#ff9900">
            </el-rate>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="评价内容" min-width="200">
          <template #default="scope">
            <div class="review-content">{{ scope.row.content }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="评价时间" width="180">
          <template #default="scope">
            {{ formatTime(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column v-if="userInfo.role === 'ADMIN' || userInfo.role === 'SUPER_ADMIN'" prop="status" label="审核状态" width="120">
          <template #default="scope">
            <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                @change="handleStatusChange(scope.row)"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column v-if="userInfo.role === 'ADMIN' || userInfo.role === 'SUPER_ADMIN'" label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button
                type="text"
                class="danger-text"
                size="small"
                @click="handleDelete(scope.row)">
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.currentPage"
          :limit.sync="queryParams.size"
          @pagination="getList" />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import { toast } from 'vue3-toastify'
import { Delete } from '@element-plus/icons-vue'
import Request from '@/utils/request'
import Pagination from '@/components/Pagination/index.vue'
import { formatTime } from '@/utils/time'
import { inject } from 'vue'

// 获取当前实例以访问 $confirm 方法
const instance = getCurrentInstance()

// 注入用户信息
const userInfo = inject('userInfo')

// 搜索表单
const searchForm = ref({
  productName: '',
  username: '',
  status: ''
})

// 查询参数
const queryParams = ref({
  currentPage: 1,
  size: 10
})

// 评价列表
const reviews = ref([])

// 总数
const total = ref(0)

// 页面加载时获取列表
onMounted(() => {
  getList()
})

const getList = async () => {
  try {
    // 关键修正：通过 .value 访问 ref 对象的属性
    const isMerchant = userInfo.value?.role === 'MERCHANT';
    // 商户才传递 merchantId，管理员不传递（设为 null）
    const merchantId = isMerchant ? userInfo.value?.id : null;

    // 修正控制台打印，查看正确的 merchantId
    console.log("merchantId:", merchantId);

    const params = {
      ...queryParams.value,
      ...searchForm.value,
      // 只有商户才携带 merchantId，管理员不携带
      ...(isMerchant && { merchantId })
    };

    const res = await Request.get('/review/page', { params });
    if (res.code === '0') {
      reviews.value = res.data.records;
      total.value = res.data.total;
    }
  } catch (error) {
    console.error('获取评价列表失败:', error);
    toast.error('获取评价列表失败');
  }
};

// 搜索
const handleSearch = () => {
  queryParams.value.currentPage = 1
  getList()
}

// 重置搜索
const resetSearch = () => {
  searchForm.value = {
    productName: '',
    username: '',
    status: ''
  }
  handleSearch()
}

// 处理状态变更
const handleStatusChange = async (row) => {
  try {
    const res = await Request.put(`/review/${row.id}/status?status=${row.status}`)
    if (res.code === '0') {
      toast.success(`审核${row.status === 1 ? '通过' : '不通过'}成功`)
      getList()
    } else {
      // 如果失败，恢复原状态
      row.status = row.status === 1 ? 0 : 1
      toast.error('操作失败')
    }
  } catch (error) {
    // 发生错误时恢复原状态
    row.status = row.status === 1 ? 0 : 1
    console.error('更新评价状态失败:', error)
    toast.error('操作失败')
  }
}

// 删除评价
const handleDelete = async (row) => {
  try {
    // 正确写法：所有参数放在一个配置对象中
    await instance.proxy.$confirm({
      message: '确认删除该评价?', // 提示内容
      title: '提示',               // 标题
      confirmButtonText: '确定',   // 确认按钮文本
      cancelButtonText: '取消',    // 取消按钮文本
      type: 'warning'              // 类型（警告样式）
    })

    // 用户点击确定后执行删除操作
    const res = await Request.delete(`/review/${row.id}`)
    if (res.code === '0') {
      toast.success('删除成功')
      getList()
    }
  } catch (error) {
    // 忽略用户取消或关闭对话框的情况
    if (error !== 'cancel' && error !== 'close') {
      console.error('删除失败:', error)
      toast.error('删除失败')
    }
  }
}
</script>

<style scoped>
.review-manager {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: 500;
  color: #1f2f3d;
  margin: 0;
  margin-right: 15px;
}

.operation-area {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.table-card {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.product-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-name {
  font-size: 14px;
  color: #1f2f3d;
}

.product-price {
  font-size: 13px;
  color: #f56c6c;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: #606266;
}

.review-content {
  color: #606266;
  line-height: 1.5;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 文本按钮样式 */
.success-text {
  color: #67C23A;
}

.success-text:hover {
  color: #85ce61;
}

.danger-text {
  color: #F56C6C;
}

.danger-text:hover {
  color: #f78989;
}

:deep(.el-button--text) {
  padding: 0 8px;
}

:deep(.el-switch__label) {
  color: #606266;
}

:deep(.el-switch.is-checked .el-switch__label--right) {
  color: #13ce66;
}

:deep(.el-switch:not(.is-checked) .el-switch__label--left) {
  color: #ff4949;
}

:deep(.el-switch__label--right) {
  margin-left: 6px;
}

:deep(.el-switch__label--left) {
  margin-right: 6px;
}
</style>
